<template>
  <my-main>
    <videoPlay
      v-bind="options"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeupdate"
      @canplay="onCanplay"
    />
  </my-main>
</template>

<script setup lang="ts">
import MyMain from '@/components/MyMain.vue'
import { reactive } from 'vue'
import { videoPlay } from 'vue3-video-play'
import 'vue3-video-play/dist/style.css'

const options = reactive({
  width: '100%', //播放器高度
  height: '100%', //播放器高度
  color: '#409eff', //主题色
  muted: false, //静音
  webFullScreen: false,
  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  title: '', //视频名称
  src: 'https://fileupload.cdyequ.com/20230616/e5930b9d40554614935a0682e0220589.mp4',
  poster: '' //封面
})

const onPlay = (ev: any) => {
  console.log('播放')
}
const onPause = (ev: any) => {
  console.log(ev, '暂停')
}

const onTimeupdate = (ev: any) => {
  console.log(ev, '时间更新')
}
const onCanplay = (ev: any) => {
  console.log(ev, '可以播放')
}
</script>

<style scoped></style>
